<template>
  <el-date-picker
    v-model="input"
    :value-format="valueFormat"
    style="width: 350px"
    :type="type"
    :placeholder="placeholder"
    :range-separator="rangeSeparator"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :picker-options="pickerOptions"
    :disabled="disabled"
    :default-value="defaultValue"
    :default-time="defaultTime"
    @change="click"
  />
</template>

<script>
//  :default-time="defaultTime"
export default {
  name: "Date",
  props: {
    cssstyle: {
      type: Object,
      default() {
        return {};
      }
    },
    field: {
      type: String,
      default: ""
    },
    rangeSeparator: {
      type: String,
      default: ""
    },
    startPlaceholder: {
      type: String,
      default: ""
    },
    endPlaceholder: {
      type: String,
      default: ""
    },
    defaultTime: {
      type: [Array, String],
      default: ""
    },
    defaultValue: {
      type: [Array, String],
      default: undefined
    },
    type: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd"
    },
    pickerOptions: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      input: ""
    };
  },
  watch: {
    input(val) {
      this.$emit("click", { val: this.input, field: this.field });
    }
  },
  mounted() {
    if (this.defaultValue) {
      this.input = this.defaultValue;
    }
  },
  methods: {
    click() {
      this.$emit("click", { val: this.input, field: this.field });
    }
  }
};
</script>

<style lang="scss" scoped>
.defaultStyle {
  width: 390px;
}
</style>
